<template>
<div class="hello">
  <div class="input-container">
    <div class="input-group">
      <label for="input_width">图片长(像素):</label>
      <el-input id="input_width" type="number" v-model.number="input_width"/>
    </div>
    <div class="input-group">
      <label for="input_height">图片宽(像素):</label>
      <el-input id="input_height" type="number" v-model.number="input_height"/>
    </div>
  </div>
  <div class="button-container">
    <button class="styled-button" @click="formatData">转换数据</button>
  </div>
  <div class="instructions">
    <ol>
      <li>选择要转换的链接</li>
      <li>点击“转换数据”按钮</li>
      <li>选择目标单元格“Ctrl + V”粘贴</li>
      <li>选择其中一张图片，“Ctrl+A”全选图片，右键“图片嵌入单元格”</li>
    </ol>
    <p>提示: 可以在转换前输入图片的长和宽调整图片大小。</p>
  </div>
</div>
</template>

<script setup>
import { onMounted, ref, computed } from 'vue'
import { ElMessage } from 'element-plus'
import pictureFun from './js/formatpicture.js'
import Util from "./js/util.js"

const checkFormat = ref(false)
const input_width = ref(80)
const input_height = ref(40)

// 校验是否是图片
const isImageUrl = (url) => {
  if (checkFormat.value) {
    const imageExtensions = ['jpg', 'jpeg', 'png', 'gif', 'bmp', 'webp'];
    const urlExtension = url.split('.').pop().toLowerCase();
    return imageExtensions.includes(urlExtension);
  } else {
    return true
  }
};

function format_url_data(url) {
  if (url) {
    var td = ""
    var img_list = String(url).split(';').filter(Boolean)

    img_list.forEach(function (item) {
      if (isImageUrl(item)) {
        td += '<td><img src="' + item + '" height="'+input_height.value+'" width="'+input_width.value+'"/></td>';
      }
    });
    return td ? '<table><tr>' + td + '</tr></table>' : '<table></table>'
  } else {
    return '<table></table>'
  }
}

const formatData = () => {
  let d = pictureFun.onFormatPicture('formatData')
  if(d){
    const newArr = d.map(format_url_data);
    const new_link_data = newArr.join('\n')
    Util.copyToClipboard(new_link_data)
    ElMessage({
    message: '转换成功',
    type: 'success',
    })
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
/* CSS */
.hello {
  font-family: Arial, sans-serif;
  width: 100%;
  max-width: 600px;
  margin: auto;
}

.input-container {
  display: flex;
  justify-content: space-between;
}

.input-group {
  flex: 1;
  margin-right: 15px; /* 调整输入框之间的间距 */
}

.input-group:last-child {
  margin-right: 0;
}

.input-group label {
  display: block;
  margin-bottom: 5px;
}

.styled-button {
  background-color: #4CAF50; /* Green */
  border: none;
  color: white;
  padding: 10px 20px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  cursor: pointer;
  border-radius: 4px;
  transition-duration: 0.4s;
}

.button-container {
  text-align: center;
  margin-top: 20px;
}

.styled-button:hover {
  background-color: white;
  color: black;
  border: 2px solid #4CAF50;
}

.instructions ol,
.instructions p {
  margin-left: 20px;
}
</style>
